import styled,{ createGlobalStyle } from 'styled-components'
import style,{px2rem} from '@/assets/global-style'

export const GlobalStyle = createGlobalStyle`
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed, 
	figure, figcaption, footer, header, hgroup, 
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section {
		display: block;
	}
	body {
		line-height: 1;
	}
	html, body{
		background: #f9f9f9;;
	}
	ol, ul {
		list-style: none;
	}
	blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}
	a{
		text-decoration: none;
		color: #fff;
	}
`

export const Top = styled.div`
	position: relative;
	padding: ${px2rem(10)};
	padding-top: 0;
	.inp{
		width: ${px2rem(350)};
		height:${px2rem(32)};
		border: 1px solid #ccc;
		border-radius: ${px2rem(16)};
	}
	.btn{
		position: absolute;
		top: 0;
		right: ${px2rem(20)};
		margin: ${px2rem(8)} 0;
		width: ${px2rem(34)};
		height:${px2rem(20)};
		border: 1px solid ${style["theme_color"]};
		border-radius: ${px2rem(10)};
		text-align: center;
		background-color: ${style["theme_color"]};
	}
    /* display: flex; */
    /* flex-direction: row; */
    /* justify-content: space-between; */
    /* padding: 0.25rem 0.5rem;
    & > span {
        line-height: 2rem;
        color: #f1f1f1;
        font-size: 1rem;
        &.iconfont {
            font-size: 25px;
        }
    } */
`

export const Tab = styled.div`
  height: ${px2rem(40)};
  display: flex;
  flex-direction: row;
  justify-content: center;
  a {
	width: ${px2rem(70)};
    padding: ${px2rem(10)} 0;
    font-size: ${style["font-size"]};
    color: ${style["font-color-normal"]};
    &.active {
      span {
		font-size: ${style["font-size-l"]};
        font-weight: 700;
        color: ${style["font-color-desc"]};
        /* border-bottom: 0.1rem solid #f1f1f1; */
      }
    }
  }
`;

export const TabItem = styled.div`
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  
`;

export const TabItemFloat=styled.div`
	position: absolute;
	top: 0;
	right: 0;
	padding:0 ${px2rem(10)} ;
	height: ${px2rem(40)};
	i{
		color: ${style["font-color-normal"]};
	}
`